<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="入库日期:" label-placement="left">
          <n-date-picker v-model:value="range" type="daterange" clearable />
        </n-form-item>
        <n-form-item label="流水单号:" label-placement="left">
          <n-input v-model:value="lotname" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getShipBoxList">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <vxe-grid v-bind="boxListOptions"></vxe-grid>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchShipBoxList } from '@/service';

const lotname = ref('');
const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    count += Number(item[field]);
  });
  return count;
};

const boxListOptions = reactive<VxeGridProps>({
  border: true,
  size: 'mini',
  maxHeight: '550px',
  showFooter: true,
  align: 'center',
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'PRODUCTSPECNAME',
      title: '成品料号',
      width: '160px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRODUCTREQUESTNAME',
      title: '流水单号',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'MATERIALQUANTITY',
      title: '数量'
    },
    {
      field: 'DATETIME',
      title: '日期',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'SHIPTIME',
      title: '入库时间',
      sortable: true,
      width: '160px'
    },
    {
      field: 'TOWHERE',
      title: '仓别',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PRINTING',
      title: '打标'
    },
    {
      field: 'AREANAME',
      title: '车间',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'SHIPUSER',
      title: '操作人',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'USERNAME',
      title: '姓名',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'INVOICENO',
      title: '入库单号',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PROCESSGROUPNAME',
      title: '箱号',
      sortable: true,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (column.field === 'MATERIALQUANTITY') {
          return sumNum(data, column.property);
        }
        return '';
      })
    ];
  },
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getShipBoxList = async () => {
  const result = await fetchShipBoxList(
    dayjs(range.value[0]).format('YYYYMMDD'),
    dayjs(range.value[1]).format('YYYYMMDD'),
    lotname.value
  );
  if (result.data) {
    boxListOptions.data = result.data;
    boxListOptions.data.forEach(element => {
      const temp = [];
      if (element.PRINTING1 !== null) {
        temp.push(element.PRINTING1);
      }
      if (element.PRINTING2 !== null) {
        temp.push(element.PRINTING2);
      }
      if (element.PRINTING3 !== null) {
        temp.push(element.PRINTING3);
      }
      // eslint-disable-next-line no-param-reassign
      element.PRINTING = temp.join('/');
    });
  }
};
</script>
<style scoped></style>
